<template>
    <div>
        <div class="container">
            <el-table
                v-loading="loading"
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column label="账户名" align="center">
                    <template slot-scope="scope">
                        <el-button  @click="showDetail(scope.row, scope.$index)">{{scope.row.username}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="telephone" label="联系方式" align="center"></el-table-column>
                <!-- <el-table-column prop="ip" label="IP地址" align="center"></el-table-column> -->
                <el-table-column prop="date" label="最近上线时间" align="center"></el-table-column>
                <el-table-column label="在线时长" align="center">
                    <template slot-scope="scope">
                        <div>{{scope.row.onlineTime}}分钟</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            style="color:red"
                            @click="handleDelete(scope.$index, scope.row)"
                        >踢下线</el-button>
                    </template>
                </el-table-column>
              
            </el-table>
        </div>
        
        <el-dialog title="用户信息" :visible.sync="dialogVisible">
            <el-form :model="form"  label-width="160px" class="demo-form">
                <el-divider content-position="center">账号信息</el-divider>
                <el-form-item label="用户名" prop="username">
                <el-input disabled v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                <el-input  v-model="form.email"></el-input>
                </el-form-item>
            
                <el-divider content-position="center">公司信息</el-divider>
                <el-form-item label="公司/企业/学校名称" prop="companyName">
                <el-input v-model="form.companyName"></el-input>
                </el-form-item>
                <el-form-item label="公司/企业/学校网址" prop="companyUrl">
                <el-input v-model="form.companyUrl"></el-input>
                </el-form-item>
                <el-form-item label="公司/企业/学校地址" prop="companyAddress">
                <el-input v-model="form.companyAddress"></el-input>
                </el-form-item>
                <el-form-item label="所属行业" prop="industry">
                <!-- <el-input v-model="form.industry"></el-input> -->
                <el-select v-model="form.industry" placeholder="请选择所属行业">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="母公司/集团名称" prop="parentCompanyName">
                <el-input v-model="form.parentCompanyName"></el-input>
                </el-form-item>
                <el-form-item label="母公司/集团网址" prop="parentCompanyUrl">
                <el-input v-model="form.parentCompanyUrl"></el-input>
                </el-form-item>

                <el-divider content-position="center">公司联系人信息</el-divider>


                <el-form-item label="联系人姓名" prop="name">
                <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="telephone">
                <el-input v-model="form.telephone"></el-input>
                </el-form-item>
                <el-form-item label="联系人所在城市" prop="city">
                <el-cascader
                    size="large"
                    :options="options_"
                    v-model="form.city"
                    placeholder="请选择所在地区"
                    ></el-cascader>
                </el-form-item>
                <el-form-item label="联系人详细地址" prop="address">
                <el-input v-model="form.address" placeholder="可接收快递的地址"></el-input>
                </el-form-item>

                
                <el-divider content-position="center">推送信息</el-divider>
                <el-form-item label="推送信息" prop="sendAllow">
                <el-switch v-model="form.sendAllow"></el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
    name: 'onlineManagement',
    data() {
        return {
            tableData: [],
            loading: true,
            dialogVisible: false,
            form: {},
            options_: regionData,
            options: [{
                value: 'A01',
                label: '公共安全'
            }, {
                value: 'A02',
                label: '政务'
            }, {
                value: 'A03',
                label: '教育'
            }, {
                value: 'A04',
                label: '医疗'
            }, {
                value: 'B01',
                label: '轨道'
            }, {
                value: 'B02',
                label: '公路'
            }, {
                value: 'B03',
                label: '航空'
            }, {
                value: 'B04',
                label: '水运'
            }, {
                value: 'B05',
                label: '物流'
            }, {
                value: 'C01',
                label: '电力'
            }, {
                value: 'C02',
                label: '油气'
            }, {
                value: 'C03',
                label: '矿业'
            }, {
                value: 'D01',
                label: '银行'
            }, {
                value: 'D02',
                label: '证券'
            }, {
                value: 'D03',
                label: '保险'
            }, {
                value: 'D90',
                label: '金融-其他'
            }, {
                value: 'E01',
                label: '汽车'
            }, {
                value: 'E02',
                label: '机械和电子'
            }, {
                value: 'E03',
                label: '制造-其他'
            }, {
                value: 'F01',
                label: 'ISP'
            }, {
                value: 'F02',
                label: '媒体'
            }, {
                value: 'F03',
                label: '通信'
            }, {
                value: 'F04',
                label: '软件及ICT服务'
            }, {
                value: 'Z01',
                label: '酒店及餐饮'
            }, {
                value: 'Z02',
                label: '零售与批发'
            }, {
                value: 'Z03',
                label: '建筑'
            }, {
                value: 'Z04',
                label: '文体娱'
            }, {
                value: 'Z90',
                label: '其他'
            }]
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            this.loading = true;
            const u = '/signin/userInfo/queryOnlineUser';
            this.$axios.get(encodeURI(u))
            .then((res)=>{
                this.loading = false;
                if(res.data.code == 200){
                    this.tableData = res.data.data;
                }else{
                    this.$message.error('暂无数据');
                };
            }).catch((err)=>{
                console.log(err);
            
            });
        },
        handleDelete(index,item) {
            this.loading = true;
            const u = '/signin/userInfo/offLine?userId='+ item.id;
            this.$axios.get(encodeURI(u))
            .then((res)=>{
                this.loading = false;
                if(res.data.code == 200){
                    this.$message.success(res.data.msg);
                    this.getData();
                }else{
                    this.$message.error(res.data.msg);
                };
            }).catch((err)=>{
                console.log(err);
            
            });
        },
        showDetail(item,index) {
            const u = '/signin/userInfo/queryOnlineByUser?serviceId=1&userId='+item.id;
            this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('manage_token')}})
            .then((res)=>{
                if(res.data.code == 200){
                    this.form =  res.data.data;
                    this.dialogVisible= true
                }else{
                    this.$message.error(res.data.msg);
                };;
            }).catch((err)=>{
                console.log(err);
            });
        },
    }
};
</script>

<style scoped lang="less">
.table {
    width: 100%;
    font-size: 14px;
}
.pagination {
    margin: 20px 0;
    text-align: right;
}
</style>
